<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="帖子标题">
                            <span>{{ props.row.title }}</span>
                        </el-form-item>
                        <el-form-item label="帖子内容">
                            <span>{{ props.row.content }}</span>
                        </el-form-item>
                        <el-form-item label="图片">
                            <span>{{ props.row.image }}</span>
                        </el-form-item>
                        <el-form-item label="用户名">
                            <span>{{ props.row.username }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <span>{{ props.row.createtime }}</span>
                        </el-form-item>
                        <el-form-item label="更新时间">
                            <span>{{ props.row.updatetime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="帖子 id"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="标题"
                    prop="title">
            </el-table-column>
            <el-table-column
                    label="分类"
                    prop="type">
            </el-table-column>
            <el-table-column
                    label="是否过审"
                    prop="ispast">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="是否过审"
                    width="150"
            >
                <template slot-scope="scope">
                    <el-button type="success" @click="past(scope.row)" icon="el-icon-check" size="small" circle></el-button>
                    <el-button type="danger" @click="fail(scope.row)" icon="el-icon-close" size="small" circle></el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size=pageSize
                :total="total"
                :current-page=currentPage
                @current-change=page>
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            past(row) {
                const _this = this;
                if (row.ispast == 1){
                    _this.$message("此帖子已经通过审核")
                }else {
                    axios.put("http://localhost:8181/forum/past/" + row.id).then(function (resp) {
                        if (resp.data.code == 200) {
                            _this.$alert('帖子' + row.content + ' 审核通过', '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.reload();
                                }
                            });
                        }
                    })
                }
            },
            fail(row) {
                const _this = this;
                if (row.ispast == 0) {
                    _this.$message("此帖子原本就不通过审核")
                } else {
                    axios.put("http://localhost:8181/forum/fail/" + row.id).then(function (resp) {
                        if (resp.data.code == 200) {
                            _this.$alert('问题' + row.content + ' 审核不通过', '消息', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.reload();
                                }
                            });
                        }
                    })
                }
            },
            page(currentPage){
                const _this = this
                axios.get("http://localhost:8181/manage/listPost?currentPage="+currentPage).then(function (resp) {
                    _this.tableData = resp.data.data.records
                    _this.total = resp.data.data.total
                    _this.currentPage = resp.data.data.current
                    _this.pageSize = resp.data.data.size
                })
            }

        },

        created() {
            const _this = this
            axios.get("http://localhost:8181/manage/listPost").then(function (resp) {
                _this.tableData = resp.data.data.records
                _this.total = resp.data.data.total
                _this.currentPage = resp.data.data.current
                _this.pageSize = resp.data.data.size
            })
        },
        data() {
            return {
                total: null,
                pageSize: null,
                currentPage: null,
                tableData: [{
                    id: '12987122',
                    username: '好滋好味鸡蛋仔',
                    title: '江浙小吃、小吃零食',
                    type:'',
                    content: '荷兰优质淡奶，奶香浓而不腻',
                    image: '上海市普陀区真北路',
                    createtime: '王小虎夫妻店',
                    updatetime: '10333',
                    ispast:'1'
                },]
            }
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>